<template>
	<view class="content page">
		<status-bar :title='title'></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="rich-text-box" v-if='richtext'>
			<mp-html :content="richtext" lazy-load scroll-table selectable use-anchor show-with-animation/>
		</view>
		<view class="contact" v-if='configJson'>
			<image :src="$imgUrls(configJson.serviceImg)" mode="widthFix" @click="prevImg"></image>
			<view class="box flex-box">
				<text class="thmeBg" :style="{'--color': color}"></text>
				<view @click="call" class="flex">
					<view class="flex-box align-center flex-center">
						<image class="Icon" :src="staticUrl+'/images/jh_up/icon-hotline.png'" mode="aspectFit"></image>
						<text>热线客服</text>
					</view>
					<view>{{configJson.serviceTelTime}}</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="flex" v-if='service_state != 1'>
					<view @click="contact" class="flex-box align-center flex-center">
						<image class="Icon" :src="staticUrl+'/images/jh_up/icon-chat.png'" mode="aspectFit"></image>
						<text>在线客服</text>
					</view>
					<view @click="contact">{{configJson.serviceTelTime}}</view>
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="contact" bindcontact="handleContact" class="btn-contact" v-if='service_state != 1'></button>
					<!-- #endif -->
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="flex">
					<view @click="contact" class="flex-box align-center flex-center">
						<image class="Icon" :src="staticUrl+'/images/jh_up/icon-chat.png'" mode="aspectFit"></image>
						<text>在线客服</text>
					</view>
					<view>{{configJson.serviceTelTime}}</view>
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="contact" bindcontact="handleContact" class="btn-contact" v-if='service_state != 1'></button>
					<!-- #endif -->
				</view>
				<!-- #endif -->
			</view>
		</view>
		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
		<empty v-if='error' type='1' cat='2' :msg='errMsg'></empty>
	</view>
</template>

<script>
	var that;
	export default{
		data(){
			return {
				showModal: false, // 是否显示模态框
				toTop: false,
				
				richtext: "",
				errMsg:'勤奋的小编正在火速编辑中···',
				error: false,
				title:'',
				configJson:'',
				color: getApp().globalData.color,
				service_state: uni.getStorageSync('startUp').service_state,// 是否开起客服系统
				staticUrl: this.staticUrl,
				imgs: ''
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		onLoad(e) {
			that = this;
			if(e.type == 1 || e.type == 2){ // 会员卡介绍
				if(e.type == 1){
					that.title = e.title
				}
				if(e.type == 2){
					that.title = '客服中心'
				}
				that.$http.post({
					url: '/SRA_userIntegral/myInfo',
					data: {
						VeriCode: uni.getStorageSync('bid'),
						vId: uni.getStorageSync("vid")
					}
				}).then(res => {
					if(res.data.configJson){
						if(e.type == 1 && res.data.configJson.content){
							that.richtext = that.$common.richTxt(res.data.configJson.content).html
						}
						if(e.type == 2){
							that.configJson = res.data.configJson
						}
					}else{
						that.error = true
						that.errMsg = res.notice
					}
				})
			}else{
				that.title = '关于我们'
				that.$http.post({ //获取简介
					url: '/zzj_singleSaleApi/shopIntroduction',
					data: {
						bid: uni.getStorageSync('bid'),
					}
				}).then(res => {
					if(res.data){
						that.richtext = that.$common.richTxt(res.data).html
						that.imgs = that.$common.richTxt(res.data).imgs
					}else{
						that.error = true
					}
					if(res.errcode != 100){
						that.errMsg = res.msg
						that.error = true
					}
				})
			}
			uni.setNavigationBarTitle({
				title: that.title
			})
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		methods:{
			contact: function() {
				var vid = uni.getStorageSync("vid")
				if (vid) {
					if(that.service_state == 1){ // 客服系统
						uni.navigateTo({
							url: "/userPage/message/consult"
						})
					}else{
						// uni.navigateTo({
						// 	url: "/userPage/onlineService/webHttp"
						// })
						that.call()
					}
				} else {
					that.showModal = true
				}
			},
			prevImg(){
				let arr = [that.$imgUrls(that.configJson.serviceImg)]
				uni.previewImage({
					current: 0,
					urls: arr,
					indicator: "number"
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				that.toTop = true
			} else {
				that.toTop = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		font-size: 28upx;
		color: #333333;
		letter-spacing: 5upx;
		line-height: 40upx;
		background: #FFFFFF;
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
		.rich-text-box{
			padding: $uni-page-space;
		}
	}
	.rich_text{
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.contact{
		.box{
			padding: 24rpx 0;
			z-index: 3;
			width: 100%;
			text-align: center;
			.thmeBg{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				border-radius: 12rpx;
				opacity: 0.7;
			}
			// &.noImg{
				position: fixed;
				width: calc(100% - 120rpx);
				left: 50%;
				transform: translateX(-50%);
				@keyframes bottom {
					0% {bottom: -200rpx;}
					100% {
						bottom: calc(60rpx + constant(safe-area-inset-bottom));
						bottom: calc(60rpx + env(safe-area-inset-bottom));
					}
				}
				animation: bottom .2s ease-in-out forwards;
			// }
			>view{
				font-size: 28rpx;
				font-weight: bold;
				z-index: 3;
				text{
					font-size: 28rpx;
					font-weight: bold;
				}
				position: relative;
				&:nth-last-of-type(1){
					border-left: 1px solid #EEEEEE;
				}
				.Icon{
					width: 42rpx;
					height: 42rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
